import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import {Modal, Form, Input, Icon, message} from 'antd';

@inject('user')
@observer
class AddUser extends Component{
  constructor(props) {
    super(props);
  }

  onSubmit = () => {
    this.props.form.validateFieldsAndScroll((err, values) => {
      if(err !== null) return;
      this.saveEdit(values)
    })
  }

  async saveEdit(user) {
    await this.props.user.edit(user);
    this.props.form.resetFields();
    message.success(this.props.user.editState === 'add' ? '添加用户成功' : '修改用户成功');
    this.props.user.hideEdit();
  }

  onCancel = () => {
    this.props.form.resetFields();
    this.props.user.hideEdit();
  }

  render() {
    let user = this.props.user.editUser;
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };

    return (
    <div><Modal
        title="Modal"
        visible={this.props.user.editFormVisible}
        onOk={this.onSubmit}
        onCancel={this.onCancel}
        okText="保存"
        cancelText="取消">
      <Form>
        <Form.Item label="登录账号" {...formItemLayout} >
          {getFieldDecorator('username', {
            initialValue: user.username,
            rules: [{ required: true, message: '请输入登录账号' }],
          })(
            <Input placeholder="登录账号" />
          )}
        </Form.Item>
        <Form.Item label="昵称" {...formItemLayout} >
          {getFieldDecorator('nickname', {
            initialValue: user.nickname,
          })(
            <Input placeholder="昵称" />
          )}
        </Form.Item>
        <Form.Item label="职位" {...formItemLayout} >
          {getFieldDecorator('job', {
            initialValue: user.job,
          })(
            <Input placeholder="职位" />
          )}
        </Form.Item>
        <Form.Item label="学校" {...formItemLayout} >
          {getFieldDecorator('school', {
            initialValue: user.school,
          })(
            <Input placeholder="学校" />
          )}
        </Form.Item>
        <Form.Item label="手机" {...formItemLayout} >
          {getFieldDecorator('mobile', {
            initialValue: user.mobile,
            rules: [{
              pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g,
              message: "请输入11位手机号码",
            }]
          })(
            <Input placeholder="手机" />
          )}
        </Form.Item>
        <Form.Item label="邮箱" {...formItemLayout} >
          {getFieldDecorator('email', {
            initialValue: user.email,
            rules: [{
              pattern: /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/g,
              message: '请输入格式正确的邮箱'
            }]
          })(
            <Input placeholder="邮箱" />
          )}
        </Form.Item>
        <Form.Item label="简介" {...formItemLayout} >
          {getFieldDecorator('introduct', {
            initialValue: user.introduct,
          })(
            <Input.TextArea placeholder="简介" rows={2} />
          )}
        </Form.Item>
      </Form>
      </Modal>
    </div>)
  }
};

const WrappedAddUser = Form.create({})(AddUser);
export default WrappedAddUser;
